<template>
	<view class="">
		<view class="p12" v-if="form.shop">

			<view class="p12 bg-white brs10">

				<view class="fz14">
					预约诊所：{{form.shop.shopname}}
				</view>
				<view class="fz14 mt15">
					预约服务：{{form.serve.name}}
				</view>
				<view class="fz14 mt15">
					卡号：{{form.code}}
				</view>
				<view class="fz14 mt15">
					称呼：{{form.name}}
				</view>

				<view class="fz14 mt15">
					性别：{{form.sex}}
				</view>
				<view class="fz14 mt15">
					年龄：{{form.age}}
				</view>
				<view class="fz14 mt15">
					手机号：{{form.phone}}
				</view>

			</view>

			<view class="p12" v-if="form.content">
				<view class="fz14 u-font-bold mb10">
					服务报告
				</view>
				<view>
					<u-parse :html="form.content"></u-parse>
				</view>
			</view>
		</view>

		

		<u-popup v-model="isShowPopup" mode="center" :closeable="false" border-radius="15">
			<view class="p20" style="width: 600rpx;">
				<view class="u-flex u-f-justify">上传服务凭证</view>
				<view class="mt20">
					<view class="mt12 u-flex module-images" style="flex-wrap: wrap;">

						<view class="img-item" v-for="(img,imgIndex) in imgUrl" :key="imgIndex">

							<u-icon name="close-circle-fill" class="ic-del" @click="toDel(imgIndex)"></u-icon>
							<image :src="img" style="width: 100%;height: 100%;" mode="aspectFill"></image>

						</view>
						<view v-if="imgUrl.length<=2" class="img-add u-flex u-f-justify" @click="getImage">
							<u-icon name="plus" class="fz20 c9"></u-icon>
						</view>
					</view>

				</view>

				<view class="fixed-bottom module-btn" style="position: inherit;padding: 0;">
					<button type="primary" @click="toSave" class="btn mt15">确定上传</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowPopup: false,
				curId: '',
				imgUrl: [],
				form: {}
			}
		},
		onLoad(e) {
			this.curId = e.id
			this.initData()
		},
		computed: {},
		methods: {

			toDel(idx) {
				this.imgUrl.splice(idx, 1)
			},
			getImage() {
				uni.chooseImage({

					success: res => {
						uni.request({
							url: '/wanlshops/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													let url = JSON.parse(
															data.data).data
														.fullurl
													console.log(data, 1212)
													this.imgUrl.push(url)
												},
												fail: error => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			toSave() {


				uni.request({
					url: '/wanlshop/index/subscribeUpload',
					data: {
						id: this.curId,
						image: String(this.imgUrl)
					},
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {


							uni.showToast({
								title: '提交成功'
							})
							this.isShowPopup = false
							this.initData()
						}
					}
				});

			},
			popupConfirm(e) {
				let idx = e[0]
				this.form[this.popupFiled] = this.popupList[idx].id
				this.form[this.popupFiled + '_name'] = this.popupList[idx].name
				console.log(e, 122)
			},
			initData() {

				uni.request({
					url: '/wanlshop/index/mySubscribeDetail',
					data: {
						id: this.curId
					},
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							this.form = res.res.data
						}
					}
				});
			},
			save() {}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.btn {
		border-radius: 16rpx;
	}


	.module-images {
		.img-item {
			width: 150rpx;
			height: 150rpx;
			position: relative;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.ic-del {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			font-size: 36rpx;
			color: red;
			z-index: 2;
		}

		.img-add {
			background: #F8F8F8;
			width: 150rpx;
			height: 150rpx;
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}
	}
</style>